<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less实例</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<!--1.安装node 在node安装的时候已经按照了npm (包管理工具)
2.看安装的node 是否运行成功   在命令行  cmd   输入node-v npm-v
3.安装less编译工具 在命令行输入 npm install less -g  查看less编译工具是否按照成功 lessc -v
 4.在电脑里 找到.css文件 按住shift 点击空白处右键 选在此处打开Powershell窗口
 5.webstorme设置自动编译less  在idea--files-settings--tools--File Watchers 选择添加+
点击路径那 找到less的路径 点击ok -&#45;&#45;apply申请即可  然后实验一下是否成功 写一个less文件 然后自动编译成.css文件-->
<!--页头-->
    <header id="header">
       <div class="header-container">
           <div class="logo">
               <img src="./images/logo.png"  alt="LOGO">
           </div>
           <nav class="nav">
               <a href="javascript:">Home</a>
               <a href="javascript:">Course</a>
               <a href="javascript:">Actual</a>
               <a href="javascript:">Plan</a>
               <a href="javascript:">FAQ</a>
               <a href="javascript:">Notes</a>
           </nav>
       </div>
    </header>
<!--banner-->
    <div id="banner">
        <div class="banner-container">
            <a href="javascript:"><img src="./images/banner/banner1.jpg" alt="banner1"></a>
            <a href="javascript:"><img src="./images/banner/banner2.jpg" alt="banner2"></a>
            <a href="javascript:"><img src="./images/banner/banner3.jpg" alt="banner3"></a>
        </div>
    </div>
<!--主体内容-->
    <main id="content">
        <div class="content-container">
            <aside>
                <h2 class="content-title">
                    Recent
                    <span>Course</span>
                </h2>
                <ul class="content-list">
                    <li class="content-item">
                        <a href="javascript:">
                            <div class="content-item-left">
                                <img src="./images/Course/09_07.png" >
                            </div>
                            <div class="content-item-right">
                                <h3>Hyper Text Markup Language</h3>
                                <p>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</p>
                            </div>
                        </a>
                    </li>
                    <li class="content-item">
                        <a href="javascript:">
                            <div class="content-item-left">
                                <img src="./images/Course/06_04.png" >
                            </div>
                            <div class="content-item-right">
                                <h3>Cascading Style Sheets</h3>
                                <p>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</p>
                            </div>
                        </a>
                    </li>
                    <li class="content-item">
                        <a href="javascript:">
                            <div class="content-item-left">
                                <img src="./images/Course/05_05.png" >
                            </div>
                            <div class="content-item-right">
                                <h3>JavaScript</h3>
                                <p>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</p>
                            </div>
                        </a>
                    </li>
                    <li class="content-item">
                        <a href="javascript:">
                            <div class="content-item-left">
                                <img src="./images/Course/02_09.png" >
                            </div>
                            <div class="content-item-right">
                                <h3>AngularJS</h3>
                                <p>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </aside> <!--aside旁边 侧边栏-->
            <article class="article">
                <div class="content-title">
                    <h3 class="content-title">
                        Welcome to
                        <span>Massive Open Online Course!</span>
                    </h3>
                    <p>We provide the latest knowledge to help you cope with the changing world!</p>
                    <img src="./images/article.jpg" alt="article">
                    <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
                    <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
                </div>
            </article><!--文章 -->
        </div>
    </main>
<!--footer-->
    <footer id="footer">
        <div class="footer-container">
            <div class="copyright">Copyright © 2016 atguiguc.com All Rights Reserved.</div>
            <div class="icon-list">
                <a href="javascript:"><img src="./images/icon/qq.png" alt="qq"></a>
                <a href="javascript:"><img src="./images/icon/sina.png" alt="sina"></a>
                <a href="javascript:"><img src="./images/icon/weichat.png" alt="weichat"></a>
            </div>
        </div>
    </footer>
</body>
</html>